<template>
  <view class="content">
    <view class="tabs flexr justify-space-around">
      <view
        class="tab"
        v-for="t in ['全部', '储值记录', '消费记录']"
        :key="t"
        :class="{ active: t === type }"
        @click="type = t"
        >{{ t }}</view
      >
    </view>
    <scroll-view
      class="scroll-view"
      :scroll-y="true"
      @scrolltolower="scrolltolower"
      :lower-threshold="20"
    >
      <view
        class="item flexr align-center"
        v-for="(order, index) in userStore.customerOrders"
        :key="index"
      >
        <view class="flexc flex-1 overflow-hidden">
          <view class="title-item">{{ order.title }}</view>
          <view>订单号: {{ order.order }}</view>
          <view class="time-item">{{ order.createTime }}</view>
        </view>
        <view class="score-item" :style="{ color: order.color }">{{
          order.content
        }}</view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { onLaunch, onShow, onHide, onLoad } from "@dcloudio/uni-app";
import { useUserStore } from "@/store/user";
import { ref, watch } from "vue";
const userStore = useUserStore();
const type = ref("");
onLoad((options) => {
  console.log(options);
  type.value = options.type || "全部";
});
watch(type, (val) => {
  userStore.getCustomerOrder(val, true);
});
function scrolltolower() {
  console.log("scrolltolower");
  userStore.getCustomerOrder(type.value, false);
}
</script>

<style lang="scss">
.content {
  // padding: 0 32rpx 32rpx;
  background-color: white;
  .tabs {
    background-color: $bg-content;
    .tab {
      font-size: 28rpx;
      color: $text-color2;
      height: 95rpx;
      line-height: 95rpx;
      min-height: 95rpx;
      &.active {
        color: $primary-color;
      }
    }
  }
  .scroll-view {
    flex: 1;
    overflow-y: scroll;
    padding: 32rpx 0;
    padding-top: 12rpx;
    background-color: white;
    .item {
      border-bottom: 2rpx solid $divider-color;
      padding-bottom: 20rpx;
      padding-top: 20rpx;
      padding-left: 32rpx;
      padding-right: 32rpx;
    }
    .title-item {
      font-size: 32rpx;
      margin-bottom: 10rpx;
    }
    .time-item {
      font-size: 24rpx;
      color: $text-color2;
    }
    .score-item {
      color: #e9a868;
      font-size: 48rpx;
      margin-top: 4rpx;
    }
  }
}
</style>
